<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ajax 封装</title>
</head>
<body>
    <button class="get">GET 请求数据</button>
    <button class="post">post 请求数据</button>
    

    <script>
        // ajax  封装
        // promise 铺垫  
        var getbtn = document.getElementsByClassName("get")[0];
        var postbtn = document.getElementsByClassName("post")[0];
        
        // get请求 
        getbtn.onclick = function(){
            // var xhr = new XMLHttpRequest();
            // xhr.open("get","../php/isExistUser.php?user=yoyo1",true)
            // xhr.send()
            // xhr.onreadystatechange = function(){
            //     if(xhr.readyState==4 && xhr.status ==200){
            //         var result = JSON.parse(xhr.responseText);
            //         console.log(result)
            //     }
            // }
            // get("../php/isExistUser.php",'user=yoyo1',true,'json',function(data){
            //     // data = result  形参 接收请求成功时候返回的数据  (文本 json 对象数组 html)
            //     // 把函数作为参数传递给另一个函数中  让它在另一个函数中执行  请求成功的回调 
            //     console.log("请求成功")
            //     console.log(data)
            // })

            // 缺点 (多参数传递  一一对应)  options 
            // 1. 参数不能换位置
            // 2. 参数有默认值 不能省略 
            // get({
            //     url:"../php/01_getAllGrade.php",
            //     // data:"index=2107",   // 请求发送到服务器的数据
            //     // async:true,
            //     // dataType:'json',
            //     success:function(result){  //result 形参(请求成功时候返回的数据)
            //         console.log(result)
            //     }
            // })

            // get({
            //     url:"../php/register_get.php",
            //     data:"user=qwer&pass=998877&phone=15312312323&email=ttt@qqc.com",   // 请求发送到服务器的数据
            //     dataType:'json',
            //     success:function(result){  //result 形参(请求成功时候返回的数据)
            //         console.log(result)
            //     }
            // })


            // 问题2  data参数需要我们自己手动拼接 
            // `user=${user}&pass=${pass}&phone=${phone}&email=${email}`
            // 对象 =>   转成字符串 -  自动拼接 
            get({
                url:"../php/register_get.php",
                data:{
                    user:"helloqa",
                    pass:"abc123",
                    phone:"180999776655",
                    email:"qwerty@111.com",
                    
                },   // 请求发送到服务器的数据
                dataType:'json',
                success:function(result){  //result 形参(请求成功时候返回的数据)
                    console.log(result)
                }
            })

        }
        
        // url 地址
        // data 参数 
        // async 异步请求
        // dataType 返回数据格式  text 文本  不需要格式化  json 字符串的json 需要 JSON.parse 
        // success  回调函数  异步 通过回调函数
        // 把函数作为参数传递给另一个函数中  让它在另一个函数中执行  请求成功的回调 
        function get(options){
            var {url,data,async=true,dataType="text",success} = options;
            if(data instanceof Object){  // 如果数据是一个对象  循环对象 拼接成字符串 
                var str = "";
                for(var key in data){   // 循环对象 
                    console.log(key,data[key])
                    str += key+"="+data[key]+"&";
                }
                data = str.substring(0,str.length-1);   //字符串截取 
            }
            console.log(data)
            var xhr = new XMLHttpRequest();
            xhr.open("get",data?url+'?'+data:url,async);
            xhr.send()
            xhr.onreadystatechange = function(){
                if(xhr.readyState==4 && xhr.status ==200){
                    // var result = JSON.parse(xhr.responseText);  不一定所有的返回数据都是 json
                    var result = xhr.responseText;
                    if(dataType=="json"){
                        result = JSON.parse(result);
                    }
                    // console.log(result)

                    // success 回调函数   
                    // 根据后台返回的数据的内容进行判断 是否操作成功  
                    // 登录接口  成功/失败   进入主页/ 重新登录
                    // 删除接口  成功/失败   页面删除/ 提示删除失败
                    // 一对多 以不变应万变 
                    if(success){
                        success(result)    // 把result 暴露给调用的环境 
                    }
                    
                    // const {status,detail} =  result;
                    // if(status){
                    //     // 修改成功
                    //     loadGrade()
                    //     editmodal.style.display = "none";
                    // }
                }
            }
        }
        
        
    </script>
</body>
</html>